<!DOCTYPE html>
<html>
    <head>
        <title>{{ current }}</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <link rel="stylesheet" href="/static/base.css" />
        <link rel="stylesheet" href="/static/color.css" />
        <link rel="stylesheet" href="/static/filelist.css" />
        <link rel="stylesheet" href="/static/filelist2.css" />
        <link rel="stylesheet" href="/static/filelistc.css" />
        <style>
            #sidebar {
                position: fixed;
                height: 100%;
                display: flex;
                width: 8%;
                flex-flow: column nowrap;
                align-items: stretch;
                font-size: 16px;
                line-height: 50px;
                text-align: center;
                overflow-x: hidden;
                overflow-y: scroll;
            }
            #sidebar .item {
                height: 50px;
                flex: none;
                overflow: hidden;
            }

            #page-wrapper {
                position: fixed;
                width: 92%;
                height: 100%;
                top: 0;
                right: 0;
            }

            .filelist {
                margin: 20px;
            }

            #img_view {
                height: 100%;
            }

            #img_view img {
                display: inline-block;
                height: 100%;
                margin: 0 10px;
            }
        </style>
        {% if image_list %}
        <style>
            #page-wrapper {
                white-space: nowrap;
                overflow-x: scroll;
                overflow-y: hidden;
            }
        </style>
        {% else %}
        <style>
            #page-wrapper {
                overflow-x: hidden;
                overflow-y: scroll;
            }
        </style>
        {% endif %}
    </head>
    <body class="galaxy">
        <nav id="sidebar">
            {% for item in table_list %} {% if item == current %}
            <a class="item" href="/{{ table_path }}{{ item }}/" id="current">{{ item }}</a>
            {% else %}
            <a class="item" href="/{{ table_path }}{{ item }}/">{{ item }}</a>
            {% endif %} {% endfor %}
        </nav>
        <div id="page-wrapper">
            {% if image_list %}
            <div id="img_view">
                {% for file in image_list %}
                <img class="item" src="/{{ child_path }}{{ file }}" />
                {% endfor %}
            </div>
            {% else %}
            <div class="filelist">
                {% for file in child_list %}
                <a class="item" href="/{{ child_path }}{{ file }}">{{ file }}</a>
                {% endfor %}
            </div>
            {% endif %}
        </div>
        <script>
            let nav_dom = document.getElementById("sidebar");
            let current = document.getElementById("current").getBoundingClientRect();

            nav_dom.scrollTop += (current.top + current.bottom - nav_dom.clientHeight) / 2;

            {% if image_list %}
            let wrapper = document.getElementById("page-wrapper");
            wrapper.addEventListener("DOMMouseScroll", function (event) {
                let step = 1;
                if (event.detail > 0) {
                    wrapper.scrollLeft += step * 100;
                } else {
                    wrapper.scrollLeft -= step * 100;
                }
            });
            {% endif %}
        </script>
    </body>
</html>
